<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-系统管理</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/wangEditor.min.js"></script>
<style type="text/css">
	html, body {
		height: 100%;
		margin: 0px;
	}
	.headDiv a
	{
		/*去掉a标签的下划线*/
		text-decoration:none
	}
	/*头部div样式*/
	.headDiv
	{
		background-color:#ececec;
		position:fixed;
		top:0px;
		left:0px;
		right:0px
	}
	/*头部div的小图标样式*/
	.headDiv img
	{
		width:45px;
		height:45px;
		border-radius:25px;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:1%;
		margin-right:1%
	}
	/*系统管理标题样式*/
	.title
	{
		position:fixed;
		font-size:40px;
		left:45%
	}
	/*左侧导航栏样式*/
	.leftDiv
	{
		position:fixed;
		width:16%;
		height: calc(100% - 100px);
		top:8%;
		left:0px;
		background-color:#FAEBD7
	}
	/*左侧导航栏里面的a标签的样式*/
	.leftDiv a
	{
		font-size:25px
	}
	/*主要div样式*/
	.mainDiv
	{
		position:fixed;
		width:83%;
		height: calc(100% - 100px);
		top:8%;
		right:5px;
		border:black 1px solid
	}
	/*编辑器文本框样式*/
	.w-e-text-container
	{
    	/*修改高度和宽带时，!important是必写的*/
    	width:70% !important;
    	height:650px !important;
    	border:#ccc 1px solid !important
	}
	/*审核笔记界面的按钮的样式*/
	.unauditRecordDiv input[type="button"]
	{
		width:200px;
		height:50px;
		font-size:25px;
		border-radius:25px;
		margin-left:100px;
		margin-right:100px;
		outline:none
	}
</style>
<script>
	//富文本编辑器
	var E=window.wangEditor;
	var editor=new E("#editor");
	//获得其他页面跳转过来时携带的信息
	var msg="${param.msg}"
	//自执行函数
	$(function()
	{
		//修改地址栏里的地址
		history.pushState(null,null,"${pageContext.request.contextPath}/manage");
		//根据其他页面跳转过来时携带的信息做出相应的提示和操作
		if(msg=="auditSuccess") alert("操作成功！");
		else if(msg=="auditFailed") alert("操作失败！");
		//默认显示待审核笔记div
		$(".unauditRecordA")[0].style="font-size:35px;text-decoration:none;color:black";
		//创建富文本编辑器
		editor.create();
		//禁用富文本编辑器的编辑功能
		editor.$textElem.attr("contenteditable",false);
		//不显示富文本编辑器的工具栏
		$(".w-e-toolbar")[0].style.display="none";
		//若没有待审核笔记，则不显示笔记详情div
		if("${recordsNum}"==0) $(".recordDiv")[0].style.display="none";
	});
	//笔记审核通过
	function recordAuditPass()
	{
		location.href="${pageContext.request.contextPath}/recordAudit?recordId=${record.recordId}&auditResult=pass";
	}
	//笔记审核不通过
	function recordAuditUnpass()
	{
		//获取驳回原因
		var value=prompt("驳回原因：");
		//若驳回原因为空，则不执行驳回操作
		if(value=="" || value==null) return false;
		location.href="${pageContext.request.contextPath}/recordAudit?recordId=${record.recordId}&auditResult=unpass&reason="+value;
	}
</script>
</head>
<body>
	<!-- 头部div -->
	<div class="headDiv">
		<!-- 首页小图标 -->
		<a href="${pageContext.request.contextPath}/index" title="首页">
			<img src="${pageContext.request.contextPath}/image/home.jpg"/>
		</a>
		<span class="title">系统管理</span>
	</div>
	<br/><br/><br/>
	<!-- 主要div -->
	<div class="mainDiv">
		<!-- 待审核笔记div -->
		<div class="unauditRecordDiv">
			<!-- 若有待审核笔记，则显示共多少条笔记 -->
			<c:if test="${recordsNum!=0}">
				<h2 align="center" style="font-size:25px">共${recordsNum}条待审核笔记</h2>
			</c:if>
			<!-- 若没有待审核笔记，则显示无待审核笔记 -->
			<c:if test="${recordsNum==0}">
				<h2 align="center" style="font-size:25px">暂无待审核笔记</h2>
			</c:if>
			<!-- 笔记详情div -->
			<div class="recordDiv" style="margin-left:22%">
				<span>笔记标题：</span><span>${record.recordTitle}</span>
				<div id="editor">${record.recordContent}</div>
			</div>
		</div>
		<br/>
		<!-- 若有待审核笔记，则显示修改笔记的按钮 -->
		<c:if test="${recordsNum!=0}">
			<div align="center" class="unauditRecordDiv">
				<input type="button" value="驳回" onclick="recordAuditUnpass()"/>
				<input type="button" value="通过" onclick="recordAuditPass()"/>
			</div>
		</c:if>
	</div>
	<!-- 左侧导航栏 -->
	<div class="leftDiv">
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<p align="center"><a href="" class="unauditRecordA" onclick="return changeDiv('myRecords')">笔记审核</a></p>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<p align="center">
			<a href="${pageContext.request.contextPath}/goDeleteExtraImg" style="font-size:15px">删除多余图片</a>
		</p>
	</div>
</body>
</html>